<script lang="ts" setup>
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
const router = useRouter();

const props = defineProps({
  title: {
    type: String as PropType<string>,
    // type: String,
    default: '大伟聊前端',
  },
});
const isLogin = ref(false);
onMounted(() => {
  if (localStorage.getItem('userInfo')) isLogin.value = true;
  else isLogin.value = false;
});
const userInfo = () => {
  message.info('个人信息');
};
const logout = () => {
  message.info('退出登录');
};
</script>

<template>
  <div class="header-contanier flex-center">
    <div class="flex-between w-percent-100">
      <div class="title font-size-20">{{ title }}</div>
      <div class="setting">
        <a-space>
          <a-dropdown placement="bottomRight" v-if="isLogin">
            <a class="ant-dropdown-link font-size-18 mt-1 vertical--25%" @click.prevent>
              {{ $t('user.name') }}
            </a>

            <template #overlay>
              <a-menu>
                <a-menu-item class="locale-menu-item">
                  <a class="locale-item" href="javascript:;" @click="userInfo">个人信息</a>
                </a-menu-item>
                <a-menu-item class="locale-menu-item">
                  <a class="locale-item" href="javascript:;" @click="logout">退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-button v-else style="font-size: 18px" type="link" @click="() => router.push('/login')" size="large"
            >登录/注册</a-button
          >

          <HeaderScreenFull />
          <HeaderTheme />
          <HeaderLanguage />
        </a-space>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header-contanier {
  height: 56px;
  padding: 0px 30px;
}
</style>
